<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- meta:vp tab 视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视口viewport</title>
    <style>
        /* pc 四个模块  pad  2个模块  手机 1个模块
        1.@media 媒体   -  带条件的css样式覆盖 (权值大小相等或大小)
        2.媒介类型 -  移动设备 screen  TV  print...
        3.连接符  -  and   not  only
        4.()  -  条件  min/max-width min/max-height ....
        5.{} -  CSS代码块
        注意: 每个关键词之间用一个空格隔开

        @media (条件){css代码块}   =>  简写 

        pc -  pad  - 手机

        <576 
        >576px
        576px - 768
        768 - 992
        992 - 1200
        1200 ....
        

        320 
        360
        ..
        375
        380
        ...
        414
        */
        *{
            margin:0;
            padding:0;
        }
        .wrap{
            overflow: hidden;
        }
        .wrap .item{
            float: left;
            width: 25%;
            height: 260px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        /* pad  1080 */
        @media (max-width:1080px){
            .wrap .item{ width: 50%;}
        }
        /* 手机 640 */
        @media screen  and (max-width:640px){
            .wrap .item{ width: 100%;}
        }


    </style>
</head>

<body>

    <!-- @media 
    
    -->
    <div class="wrap">
        <div class="item" style="background-image:url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg);"></div>
        <div class="item" style="background-image:url(https://mobike.com/cn/assets/themes/moby/img/promo-02.jpg);"></div>
        <div class="item" style="background-image:url(https://mobike.com/cn/assets/themes/moby/img/promo-03.jpg);"></div>
        <div class="item"style="background-image:url(https://mobike.com/cn/assets/themes/moby/img/promo-04.jpg);"></div>
    </div>

</body>

</html>